<template>
  <view class="topContains">
    <u--image
      src="https://mms2.baidu.com/it/u=2365605583,1876116278&fm=253&app=120&f=JPEG?w=627&h=418"
      width="100%"
      height="200"
    ></u--image>
    <view class="center bg-white px-3 py-4 mx-2">
      <u-tabs
        :list="nameList"
        @click="changeTab"
        :scrollable="false"
        :current="tabIndex"
      ></u-tabs>
      <view v-if="tabIndex == 0">
        <view class="center-input mt-4 mb-8">
          <u--input
            placeholder="请输入手机号码"
            border="bottom"
            clearable
            v-model="form.username"
          ></u--input>
          <view class="mt-4">
            <u--input
              placeholder="请输入您的账号密码"
              border="bottom"
              :type="showPassword ? 'text' : 'password'"
              clearable
              v-model="form.password"
            >
              <template slot="suffix">
                <u-icon
                  :name="showPassword ? 'eye' : 'eye-off'"
                  size="24"
                  @click="showPassword = !showPassword"
                ></u-icon>
              </template>
            </u--input>
          </view>
        </view>
        <u-button
          :disabled="checkboxValue1.length > 0 ? false : true"
          text="登录"
          type="primary"
          class="custom-style"
          @click="handleLogin"
        ></u-button>
        <view class="botmPad">
          <view class="mt-4 color-gray font-12 d-flex justify-space-between">
            <text @click="getToAccount">找回账号</text>
            <text @click="isText = !isText">忘记密码?</text>
          </view>
          <view
            class="text-center colorfff font-12 pa-2 rounded-5 mt-4 bgLine"
            v-show="isText"
          >
            如忘记密码,可先用验证码登录后,在app内找回密码
          </view>
        </view>
      </view>
      <view class="" v-else>
        <view class="center-input mt-4 mb-8">
          <view class="mb-6">
            <u--input
              placeholder="请输入手机号"
              type="number"
              maxlength="11"
              border="bottom"
              clearable
              v-model="phone"
              @change="changePhone"
            ></u--input>
          </view>
          <u-button
            :disabled="isPhoneTrue ? false : true"
            text="获取验证码"
            type="primary"
            class="custom-style"
            @click="codeBtn"
          ></u-button>
          <view class="my-4 text-center color-gray font-12">
            未注册手机号验证后自助创建师傅账号备份
          </view>
        </view>
      </view>

      <view class="my-8 px-3 font-12 d-flex align-center">
        <u-checkbox-group v-model="checkboxValue1" placement="column">
          <u-checkbox size="14" shape="circle" :name="111"> </u-checkbox>
        </u-checkbox-group>
        <view>
          <text>已阅读并同意</text>
          <text class="color-primary ml-2">《隐私政策》</text>
        </view>
      </view>
    </view>

    <u-modal
      :show="isYsShow"
      showCancelButton
      cancelText="我再想想"
      confirmText="同意并继续"
      @cancel="isYsShow = false"
      @confirm="toCode"
    >
      <view class="text-left color000 font-12">
        已阅读并同意
        <text class="color-primary">《隐私政策》</text
        >,未注册手机号验证后自动创建师傅账号
      </view>
    </u-modal>
  </view>
</template>

<script>
import { loginAuth } from "../../api/auth";
export default {
  data() {
    return {
      tabIndex: 0, //当前选中的tab
      showPassword: false,
      isText: false,
      isPhoneTrue: false, //验证手机号
      isYsShow: false,
      checkboxValue1: [],
      phone: "",
      nameList: [
        {
          name: "师傅账号登录",
        },
        {
          name: "验证码登录",
        },
      ],
      form: {},
    };
  },
  methods: {
    changeTab(e) {
      this.tabIndex = e.index;
    },
    changePhone() {
      const regex = /^1[3-9]\d{9}$/;
      let isphone = regex.test(this.phone);
      if (isphone) {
        this.isPhoneTrue = true;
      } else {
        this.isPhoneTrue = false;
      }
    },
    codeBtn() {
      if (this.checkboxValue1.length == 0) {
        this.isYsShow = true;
      }
    },
    getToAccount(item) {
      uni.navigateTo({
        url: "/pages/login/retrieveAccount",
      });
    },
    // 登录
    async handleLogin() {
      try {
        const res = await loginAuth({
          ...this.form,
        });
        console.log(res, "====login ");
        uni.setStorageSync("userdata", res.data);
        if (res.data.isBasicInfocomplete) {
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/userInfo/index",
            });
          }, 300);
        } else {
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/home/index",
            });
          }, 300);
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.topContains {
  box-sizing: border-box;

  .center {
    position: relative;
    height: 100vh;
    margin-top: -60rpx;
    border-radius: 16rpx 16rpx 0 0;

    .custom-style {
      border-radius: 14rpx;
    }

    .botmPad {
      .bgLine {
        position: relative;
        background-color: black;
      }

      .bgLine::before {
        content: "";
        position: absolute;
        top: -20px;
        transform: translateX(-50%);
        /* 水平居中 */
        right: 10px;
        /* 控制三角形的位置 */
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent #000 transparent;
      }
    }
  }
}
</style>
